<template>
    <div class="error">
        <template v-if="error.statusCode === 404">
            <div class="code">
                <img src="~assets/img/404.png" />
                <p>对不起~没有找到你请求的页面</p>
            </div>
        </template>
        <template v-else>
            <div class="code">
                <img src="~assets/img/500.png" />
                <!-- 应用发生错误异常 -->
                <p>{{ error.statusCode }}</p>
                <p class="msg">{{ error.message }}</p>
            </div>
        </template>
    </div>
</template>
<script>
export default {
    head() {
        return {
            title: this.error.statusCode
        };
    },
    props: ['error']
};
</script>

<style lang="less">
// @import url('~assets/less/common.less');
// @import url('~assets/less/Mixins.less');
// @import url('~assets/less/normalize.less');
// @import url('~assets/less/transition.less');
</style>

<style scoped lang="less">
.error {
    height: 100%;
}

.code {
    text-align: center;
    padding-top: 200px;
    width: 800px;
    margin: 0 auto;

    img {
        width: 500px;
        margin-bottom: 20px;
    }

    p {
        font-size: 20px;
        color: #333;
        line-height: 1.6;
    }

    .msg {
        font-size: 16px;
        color: #828282;
    }
}
</style>
